<template>
  <el-table
    header-row-class-name="base-table-header-v3"
    row-class-name="base-table-row-v3"
    class="sparepart-apply-table"
    border
    :data="data">
    <el-table-column type="index" width="48" :label="$t('common.base.SN')" />
    <el-table-column
      v-for="column in columns"
      :key="column.fieldName"
      :label="column.displayName"
      :prop="column.fieldName"
      show-overflow-tooltip
      :min-width="column.minWidth || '100px'">
      <template slot-scope="scope">
        {{ $formatFormField(column, scope.row) }}
      </template>
    </el-table-column>
  </el-table>
</template>

<script>
export default {
  name: 'task-material-apply-list',
  props: {
    data: {
      type: Array,
      default: () => ([])
    },
    columns: {
      type: Array,
      default: () => ([])
    }
  }
}
</script>

<style lang="scss">
.sparepart-apply-table {
  background: $bg-color-l1;

  &::before {
    height: 0;
  }

  .base-table-header-v3 th {
    background: none;
    color: #8593A6;
    border-bottom: none;
    font-size: $font-size-small;
  }

  tr {
    background: none !important;

    &:hover td {
      background: none !important;
    }
  }

  td {
    border-bottom: none !important;
  }
}
</style>
